<template>
  <div>
    <div class="swiper-box">
      <swiper :options="swiperOption">
        <swiper-slide v-for="temp in 5" :key=" 'miva' + temp ">
          <img src="@/assets/img/binner.png">
        </swiper-slide>
      </swiper>
      <div class="binner-btn-container">
        <div class="binner-btn-box">
          <div class="swiper-button swiper-button-next"></div>
          <div class="swiper-button swiper-button-prev"></div>
        </div>
      </div>
      <!-- 文字 -->
      <div class="text-box">
        <div class="text-b">{{text.title}}</div>
        <div class="text-s">{{text.txt}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "binnerOneItem",
  props: {
    text: {
      type: Object,
      default: () => {
        return {
          title: "模式1轮播用法",
          txt: "传入text的props, 类型为对象, 属性为 title, txt"
        };
      }
    }
  },
  data() {
    return {
      swiperOption: {
        autoplay: true,
        observer: true,
        observeParents: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  }
};
</script>

<style lang="less" scoped>
.swiper-box {
  position: relative;
  max-width: 1920px;
  max-height: 600px;
  overflow: hidden;
  margin: auto;
  text-align: center;
  img {
    width: 100%;
  }
}
.binner-btn-container {
  position: absolute;
  bottom: 10%;
  left: 50%;
  z-index: 999;
  width: 100%;
  max-width: 1140px;
  transform: translateX(-50%);
}
.binner-btn-box {
  width: 100px;
  position: absolute;
  right: 5%;
  .swiper-button {
    background-image: url("../assets/img/binnerBtn.png");
    width: 34px;
    height: 34px;
    padding: 10px;
    background-size: cover;
    outline: none !important;
    &.swiper-button-next {
      transform: rotateZ(180deg);
    }
  }
}
.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  width: 100%;
  max-width: 1140px;
  transform: translate(-50%, -50%);
  color: #fff;
  cursor: default;
  .text-b {
    font-size: 50px;
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  .text-b {
    font-size: 30px !important;
    margin-bottom: 20px;
  }
}
</style>
